<template>
  <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
    <el-form-item prop="user">
      <el-input
        v-model="form.user"
        prefix-icon="el-icon-user"
        clearable
        @keyup.enter="focusNext"
        :placeholder="$t('login.userPlaceholder')"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        prefix-icon="el-icon-lock"
        clearable
        show-password
        @keyup.enter="login"
        ref="password"
        :placeholder="$t('login.PWPlaceholder')"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        style="width: 100%"
        :loading="islogin"
        round
        @click="login"
        >{{ $t("login.signIn") }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      userType: "admin",
      form: {
        user: "",
        password: "",
        autologin: false,
      },
      rules: {
        user: [{ required: true, message: this.$t("login.userError"), trigger: "blur" }],
        password: [
          { required: true, message: this.$t("login.PWError"), trigger: "blur" },
        ],
      },
      islogin: false,
    };
  },
  watch: {
    userType(val) {
      if (val == "admin") {
        this.form.user = "admin";
        this.form.password = "admin";
      } else if (val == "user") {
        this.form.user = "user";
        this.form.password = "user";
      }
    },
  },
  mounted() {},
  methods: {
    // get os
    GetOs() {
      return "others";
    },
    focusNext() {
      this.$refs.password.focus();
    },
    async login() {
      var validate = await this.$refs.loginForm.validate().catch(() => {});
      if (!validate) {
        return false;
      }

      this.islogin = true;
      var data = {
        username: this.form.user,
        password: this.form.password,
        os: this.GetOs(),
        // this.$TOOL.crypto.MD5(this.form.password)
      };
      //获取token
      var user = await this.$API.auth.token.post(data);
      await this.setLoginData(user);
    },
    async setLoginData(user) {
      //设置用户前，判断版本
      let VERSION = this.$TOOL.data.get("VERSION");
      let NEW_VERSION = await this.getVer();
      if (VERSION != NEW_VERSION) {
        this.$TOOL.data.clear();
        this.$TOOL.data.set("VERSION", NEW_VERSION);
      }
      if (user.code == 200) {
        this.$TOOL.data.set(
          "TOKEN",
          user.data.token,
          this.form.autologin ? 24 * 60 * 60 : 0
        );

        this.$TOOL.data.set("USER_INFO", user.data.userInfo);
        this.$TOOL.data.set("LOGIN_COUNT", user.data.count);
      } else {
        this.islogin = false;
        this.$message.warning(user.message);
        return false;
      }
      //获取菜单
      var menu = null;
      // if (this.form.user == "admin") {
      menu = await this.$API.system.menu.myMenus.get();
      // } else {
      //   menu = await this.$API.demo.menu.get();
      // }
      if (menu.code == 200) {
        if (menu.data.length == 0) {
          this.islogin = false;
          this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
            type: "error",
            center: true,
          });
          return false;
        }
        this.$TOOL.data.set("MENU", menu.data);
        // this.$TOOL.data.set("PERMISSIONS", menu.data.permissions);
      } else {
        this.islogin = false;
        this.$message.warning(menu.message);
        return false;
      }
      this.$WS.connection();
      this.$message.success("Login Success 登录成功");
      this.islogin = false;
      this.$router.replace({
        path: "/",
      });
    },
    async getVer() {
      const ver = await this.$API.system.version.get();
      return ver.data;
    },
  },
};
</script>

<style></style>
